<template>
  <div>
    <navbar /><!-- 头 -->
    <tips /><!-- 7天无理由 -->
    <div>
      <img
        :src="info.list_pic_url"
        alt=""
        width="50%"
        style="margin-left: 1.2rem"
      />
    </div>
    <div class="info">
      <h3>{{ info.name }}</h3>
      <p>{{ info.goods_brief }}</p>
      <div>{{ info.retail_price | filtermoney }}</div>
    </div>

    <van-cell-group>
      <van-cell
        class="showSku"
        title="选择规格"
        is-link
        @click="skushow = !skushow"
      />
    </van-cell-group>

    <div class="attribute">
      <h4>商品参数</h4>
    </div>
    <div class="issue">
      <div class="line_title">
        <span></span>
        <h3>常见问题</h3>
      </div>
      <ul>
        <li>
          <h2>购买运费如何收取？</h2>
          <p>
            单笔订单金额（不含运费）满88元免邮费；不满88元，每单收取10元运费。
            (港澳台地区需满
          </p>
        </li>
        <li>
          <h2>使用什么快递发货？</h2>
          <p>
            严选默认使用顺丰快递发货（个别商品使用其他快递），配送范围覆盖全国大部分地区（港澳台地区除
          </p>
        </li>
        <li>
          <h2>如何申请退货？</h2>
          <p>
            1.自收到商品之日起30日内，顾客可申请无忧退货，退款将原路返还，不同的银行处理时间不同，
          </p>
        </li>
        <li>
          <h2>如何开具发票?</h2>
          <p>
            1.如需开具普通发票，请在下单时选择“我要开发票”并填写相关信息（APP仅限2.4.0及以
          </p>
        </li>
      </ul>
    </div>
    <div class="issue">
      <div class="line_title">
        <span></span>
        <h3>大家都在看</h3>
      </div>
    </div>
    <product :GoodList="GoodList[0]" />
    <!-- 参数栏 -->
    <van-sku
      v-model="skushow"
      :sku="sku"
      :goods="goods"
      :hide-stock="sku.hide_stock"
      :show-add-cart-btn="false"
      ref="sku"
    />
    <!-- 最下加入购物车 -->
    <my-goods-action @addCart="addCart" :badge="badge" />

    <BackTop />
  </div>
</template>

<script>
import Navbar from "./Home/Navbar.vue";
import Tips from "./Home/Tips.vue";
import MyGoodsAction from "./Home/MyGoodsAction.vue";
import Product from "./Home/Product.vue";
import BackTop from "./Home/BackTop";
import { mapState } from "vuex";
export default {
  components: { Navbar, Tips, MyGoodsAction, Product, BackTop },
  name: "productdetail",

  data() {
    return {
      /* 商品对象 */
      info: {},
      /* 其他相关数组 */
      GoodList: [],
      /* 参数弹窗 */
      skushow: false,
      /* 商品数据  点击规格提示 */
      sku: {
        tree: [],
        hide_stock: false,
        price: 1,
        stock_num: 100,
      },
      goods: {
        picture: "",
      },
      /* 购物车数量 */
      badge: "",
      /* 判断用户是否登录 */
      bool: false,
    };
  },
  created() {
    this.$http
      .get("http://localhost:8080/api/getGoodsList", {
        params: {
          id: this.$route.params.id,
        },
      })
      .then((res) => {
        this.GoodList = res.data;
      })
      .catch((err) => {});
    this.$http
      .get("http://localhost:8080/api/getGoods", {
        params: {
          id: this.$route.params.id,
        },
      })
      .then((res) => {
        this.info = res.data;
        this.sku.price = this.info.retail_price;
        this.goods.picture = this.info.list_pic_url;
      })
      .catch((err) => {});



      this.$http
      .get("http://192.168.33.238:8080/api/getGoodsList", {
        params: {
          id: this.$route.params.id,
        },
      })
      .then((res) => {
        this.GoodList = res.data;
      })
      .catch((err) => {});
    this.$http
      .get("http://192.168.33.238:8080/api/getGoods", {
        params: {
          id: this.$route.params.id,
        },
      })
      .then((res) => {
        this.info = res.data;
        this.sku.price = this.info.retail_price;
        this.goods.picture = this.info.list_pic_url;
      })
      .catch((err) => {});

    /* 判断是否登录 */

    this.bool = this.ifLogined;

    if (this.bool) {
      /* 调用购物车数量 */
      this.getCartCount();
    }
  },
  watch: {
    $route(to, from) {
      if (to.path == from.path) {
        return;
      } else {
        this.$router.go(0); // 刷新页面
      }
    },
  },
  methods: {
    addCart() {
      /* 判断弹窗是否打开 */
      if (this.skushow) { 
        if (this.bool) {
          this.$http
            .get("http://localhost:8080/api/addCartList", {
              params: {
                id: this.info.id,
                img: this.info.list_pic_url,
                goodsName: this.info.name,
                price: this.info.retail_price,
                num: this.$refs.sku.getSkuData().selectedNum,
              },
            })
            .then((res) => {
              this.$toast.success("添加成功");
              this.skushow = false;
              this.badge = res.data.count;
            })
            .catch((err) => {});

            this.$http
            .get("http://192.168.33.238:8080/api/addCartList", {
              params: {
                id: this.info.id,
                img: this.info.list_pic_url,
                goodsName: this.info.name,
                price: this.info.retail_price,
                num: this.$refs.sku.getSkuData().selectedNum,
              },
            })
            .then((res) => {
              this.$toast.success("添加成功");
              this.skushow = false;
              this.badge = res.data.count;
            })
            .catch((err) => {});
        } else {
          this.$store.commit("historyOptions/changeIfgoBack", true);
          this.$bus.$emit("modify", 4);
          this.$router.push("/user");
        }
      } else {
        this.skushow = true;
      }
    },
    getCartCount() {
      this.$http.get("http://localhost:8080/api/getCartCount").then((res) => {
        this.badge = res.data.count;
      });
      this.$http.get("http://192.168.33.238:8080/api/getCartCount").then((res) => {
        this.badge = res.data.count;
      });
    },
  },
  computed: {
    ...mapState("historyOptions", ["ifLogined"]),
  },
};
</script>

<style lang="less" scoped>
.info {
  background: #fff;
  text-align: center;
  padding: 15px 0;
  h3 {
    font-weight: normal;
    font-size: 0.2rem;
    line-height: 30px;
  }
  p {
    color: #999;
    font-size: 0.14rem;
    line-height: 30px;
  }
  div {
    color: darkred;
    font-size: 0.14rem;
    line-height: 30px;
  }
}
.attribute {
  background: #fff;
  padding: 5px 2%;
  overflow: hidden;
  h4 {
    font-weight: normal;
    font-size: 0.2rem;
    margin-top: 20px;
    margin-bottom: 15px;
    padding-left: 0.1rem;
  }
}

.line_title {
  width: 100%;
  height: 40px;
  position: relative;
  font-size: 0.18rem;
  background: #fff;

  span {
    width: 50%;
    height: 2px;
    background: #ccc;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    z-index: 1;
  }
  h3 {
    width: 30%;
    height: 40px;
    font-weight: normal;
    font-size: 0.18rem;
    background: #fff;

    line-height: 40px;
    text-align: center;
    position: absolute;
    text-align: center;
    line-height: 40px;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    margin: auto;
  }
}
.issue {
  background: #fff;
  h2 {
    font-weight: 400;
    height: 40px;
    padding-left: 0.2rem;
    line-height: 40px;
    font-size: 0.16rem;
    position: relative;
    padding-right: 0.1rem;
  }
  h2::after {
    content: "";
    width: 20px;
    height: 20px;
    background: red;
  }
  p {
    font-size: 0.14rem;
    padding-left: 0.2rem;
    padding-right: 0.1rem;
    color: #666;
  }
}
</style>